<template>
  <div class="pb30">
    <div class="w100 mb20">
      <el-button
        type="success"
        icon="el-icon-tickets"
        size="mini"
        @click="handleOrder"
      >
        生成货单
      </el-button>
    </div>

    <el-table v-loading="loading" :data="list">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="index" label="序号" align="center" width="50">
        <template slot-scope="scope">
          {{
            scope.$index + (queryParams.pageNum - 1) * queryParams.pageSize + 1
          }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="mobile" />
      <el-table-column label="总价" align="center" prop="allMoney" >
        <template slot-scope="scope">
          {{ scope.row.allMoney }}元
        </template>
      </el-table-column>
      <el-table-column label="预订时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看订单详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="detailOpen"
      width="800px"
      append-to-body
    >
      <detailDialog ref="detailInfo" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
<script>
import { listOrder, getOrder } from "@/api/project/order";
import detailDialog from "@/components/Aproject/dialog/detail/order";
export default {
  name: "order",
  components: { detailDialog },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,

      // 总条数
      total: 0,
      // 商品表格数据
      list: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

      detailOpen: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listOrder(this.queryParams)
        .then((response) => {
          this.list = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleView(row) {
      getOrder(row.oderId).then((res) => {
        this.detailOpen = true;
        this.$nextTick(() => {
          this.$refs.detailInfo.form = res.data;
        });
      });
    },
    // 生成货单
    handleOrder() {
      this.ids;
      this.download(
        "system/order/autoPage",
        {
          ...this.ids,
        },
        `货单数据.xlsx`
      );
    },
  },
};
</script>
    